import { Component } from 'react';
import React from 'react';
import { connect } from 'umi';
import HighPerformTable from '@/components/HighPerformTable';
import { PlusOutlined } from '@ant-design/icons';
import { Button, FormInstance, Input, Popover } from 'antd';
import APIS from '@/apis';
import URLS from '@/apis/APIUrlDefine';

class PlatformManagerPage extends Component<any, any> {
  state = {
    modalVisible: false,
    modalRecord: { title: '', author: '', content: '' }
  }
  actionRef: any;

  requestGetData() 
  {
    return APIS.ClientAPI.GetClientList({ page: 1, count: 9999 });
  }

  handleUpdateModalVisible(value: boolean) {
  }

  clomns: any = [
    {
      title: '平台名称',
      dataIndex: 'clientId',
      width: "8%",
      formItemProps: {
        rules: [
          {
            required: true,
            message: '职称为必填项',
          },
        ]
      },
      renderFormItem: (item: any, config: any, form: FormInstance) => {
        return <Input onChange={(ev) => form.setFieldsValue({ "clientId": ev.target.value })}></Input>
      },
    },
    {
      title: '服务范围',
      dataIndex: 'scope',
      hideInForm: true,
      width: "8%",
    },
    {
      title: '验证类型',
      dataIndex: 'authorizedGrantTypes',
      hideInForm: true,
      width: "40%",
    },
    {
      title: '链接地址',
      dataIndex: 'webServerRedirectUri',
      width: "20%",
      formItemProps: {
        rules: [
          {
            required: true,
            message: '职称为必填项',
          },
        ]
      },
      renderFormItem: (item: any, config: any, form: FormInstance) => {
        return <Input onChange={(ev) => form.setFieldsValue({ "webServerRedirectUri": ev.target.value })}></Input>
      },
    },
  ];

  handleAdd(data:any){
    APIS.ClientAPI.CreateNewClient({ client: data.clientId, redirect: data.webServerRedirectUri }).then(() => {
      this.actionRef.handleModalVisible(false);
      this.actionRef.reload();
      return Promise.resolve(true);
    })
    .catch(() => {
      return Promise.resolve(false);
    });
  }



  render() {
    return (
      <div>
        <HighPerformTable<any>
          columns={this.clomns}
          requestGetData={this.requestGetData.bind(this)}
          ref={(ref) => (this.actionRef = ref)}
          action

          handleAdd={this.handleAdd.bind(this)}
          toolBarRender={() => [
            <Button key='addArticle' type="primary" onClick={() => this.actionRef.handleModalVisible(true)}>
              <PlusOutlined /> 新增平台
            </Button>,
          ]}
        />
      </div>
    );
  }
}

export default connect()(PlatformManagerPage);
